<eqm-container #container [enabled]="enabled" (click)="editable ? undefined : toggle($event)"
  class="container">
  <div class="item">

    <eqm-icon *ngIf="selectedItem && selectedItem.icon" [name]="selectedItem.icon" [rotate]="selectedItem.iconRotate || 0" class="icon" [color]="selectedItem.iconColor || colors.accent"></eqm-icon>
    <eqm-label [color]="colors.accent"> {{(searchText || (items.length ? (selectedItem ? selectedItem[labelParam] : placeholder) : noItemsPlaceholder))}} </eqm-label>
  </div>

  <div class="right" *ngIf="searchText" (click)="searchText = undefined">
    <eqm-icon [name]="'cross'" [height]="16" [width]="16" [color]="colors.accent"></eqm-icon>
  </div>
  <div class="right" *ngIf="!searchText" (click)="editable ? toggle($event) : undefined">
    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? colors.accent : '#555'" [rotate]="-90">
    </eqm-icon>
    <eqm-icon [name]="'triangle'" [height]="8" [width]="8" [color]="items.length ? colors.accent : '#555'" [rotate]="90">
    </eqm-icon>
  </div>
</eqm-container>
<eqm-select-box [numberOfVisibleItems]="numberOfVisibleItems" (clickedOutside)="close()" #box [hidden]="!shown || (filteredItems.length === 0)"
  [class]="'items-select-box' + (direction === 'down' ? ' down' : ' up')" [items]="filteredItems" [labelParam]="labelParam"
  [selectedItem]="selectedItem" (itemSelected)="selectItem($event)" [style.top.px]="yCoordinate"></eqm-select-box>